<template>
  <view v-if="visible" class="fixed z-50 flex items-center justify-center bg-black bg-opacity-50 p-[5rpx]">
    <!-- 优化弹窗宽度适配，大屏更宽，小屏自适应 -->
    <view class="bg-white rounded-[24rpx] mx-[16rpx] w-full max-w-[800rpx] p-[32rpx] shadow-xl transform transition-all duration-300 scale-100">
      <!-- 标题 -->
      <view class="text-center mb-[32rpx]">
        <text class="text-[34rpx] font-bold text-gray-800">评价用户</text>
      </view>

      <!-- 用户信息 -->
      <view class="flex items-center mb-[32rpx] p-[20rpx] bg-gray-50 rounded-[16rpx]">
        <image
            :src="userInfo.avatar || 'http://www.dzgktf.com/templets/default/images/wtyt.jpg'"
            class="w-[68rpx] h-[68rpx] rounded-full mr-[16rpx] border border-gray-100"
            mode="aspectFill"
        />
        <view>
          <text class="text-[28rpx] font-bold text-gray-800">{{ userInfo.name }}</text>
          <text class="text-[24rpx] text-gray-500 block mt-[4rpx]">{{ userInfo.taskTitle }}</text>
        </view>
      </view>

      <!-- 星级评分 -->
      <view class="mb-[36rpx]">
        <text class="text-[28rpx] font-medium text-gray-700 mb-[16rpx] block">服务评分</text>
        <view class="flex items-center justify-center gap-x-[20rpx]">
          <view
              v-for="star in 5"
              :key="star"
              class="w-[56rpx] h-[56rpx] flex items-center justify-center cursor-pointer transition-all duration-200"
              @click="handleStarClick(star)"
          >
            <IconFont
                :name="star <= rating ? 'star-fill' : 'star'"
                :class="star <= rating ? 'text-yellow-400' : 'text-gray-300'"
                :style="{ fontSize: '40rpx' }"
            />
          </view>
        </view>
        <view class="text-center mt-[16rpx]">
          <text class="text-[26rpx] text-gray-500">{{ getRatingText() }}</text>
        </view>
      </view>

      <!-- 评论输入 -->
      <view class="mb-[36rpx]">
        <text class="text-[28rpx] font-medium text-gray-700 mb-[16rpx] block">评价内容</text>
        <nut-textarea
            v-model="comment"
            class="w-full min-h-[140rpx] p-[10rpx] border border-gray-300 rounded-[16rpx] text-[26rpx] text-gray-800"
            placeholder="请输入您的评价内容..."
            maxlength="200"
            auto-size
            :auto-size="{ minRows: 3, maxRows: 6 }"
        />
        <view class="flex justify-end mt-[10rpx]">
          <text class="text-[24rpx] text-gray-400">{{ getFinalCommentLength() }}/200</text>
        </view>
      </view>

      <!-- 快捷评价标签 -->
      <view class="mb-[36rpx]">
        <text class="text-[28rpx] font-medium text-gray-700 mb-[16rpx] block">快捷评价</text>
        <view class="flex flex-wrap gap-[16rpx]">
          <view
              v-for="tag in quickTags"
              :key="tag"
              :class="[
              'px-[20rpx] py-[12rpx] rounded-[20rpx] text-[24rpx] cursor-pointer transition-all duration-200',
              commentIncludesTag(tag) ? 'bg-blue-100 text-blue-500' : 'bg-gray-100 text-gray-600'
            ]"
              @click="toggleTag(tag)"
          >
            {{ tag }}
          </view>
        </view>
      </view>

      <!-- 按钮区域 -->
      <view class="flex gap-x-[20rpx]">
        <nut-button
            type="default"
            class="flex-1 border-gray-300 text-gray-600 rounded-[24rpx] py-[20rpx] text-[28rpx]"
            @click="handleCancel"
        >
          取消
        </nut-button>
        <nut-button
            type="primary"
            class="flex-1 bg-blue-500 border-none rounded-[24rpx] py-[20rpx] text-[28rpx]"
            :disabled="!canSubmit"
            @click="handleConfirm"
        >
          确定
        </nut-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { IconFont } from '@nutui/icons-vue-taro';
import { Button as nutButton, Textarea as nutTextarea } from '@nutui/nutui-taro';

/**
 * 评价弹窗组件
 * @description 包含星级评分、评论输入、快捷标签等功能，优化了尺寸适配和交互体验
 */

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  userInfo: {
    type: Object,
    default: () => ({
      id: '',
      name: '',
      avatar: '',
      taskTitle: ''
    })
  }
});

const emit = defineEmits(['confirm', 'cancel']);

// 评分
const rating = ref(0);

// 评论内容
const comment = ref('');

// 快捷评价标签
const quickTags = ref([
  '工作认真',
  '态度良好',
  '按时完成',
  '沟通顺畅',
  '专业能力强',
  '服务周到',
  '响应及时',
  '质量优秀'
]);

// 是否可以提交
const canSubmit = computed(() => {
  return rating.value > 0 && comment.value.trim().length > 0;
});

/**
 * 检查评论中是否包含指定标签
 */
const commentIncludesTag = (tag) => {
  const commentTrim = comment.value.trim();
  if (!commentTrim) return false;
  return commentTrim.split('，').includes(tag);
};

/**
 * 点击星级
 */
const handleStarClick = (star) => {
  rating.value = star;
};

/**
 * 获取评分文字
 */
const getRatingText = () => {
  const texts = ['', '很差', '较差', '一般', '良好', '优秀'];
  return texts[rating.value] || '请选择评分';
};

/**
 * 获取最终评论长度
 */
const getFinalCommentLength = () => {
  return comment.value.trim().length;
};

/**
 * 切换标签选择
 */
const toggleTag = (tag) => {
  const commentTrim = comment.value.trim();
  const commentArr = commentTrim ? commentTrim.split('，') : [];

  if (commentArr.includes(tag)) {
    // 已包含标签，移除
    comment.value = commentArr.filter(item => item !== tag).join('，');
  } else {
    // 未包含标签，添加
    commentArr.push(tag);
    comment.value = commentArr.join('，');
  }
};

/**
 * 确认评价
 */
const handleConfirm = () => {
  if (!canSubmit.value) return;

  const evaluateData = {
    rating: rating.value,
    comment: comment.value,
    userInfo: props.userInfo
  };

  emit('confirm', evaluateData);
  resetForm();
};

/**
 * 取消评价
 */
const handleCancel = () => {
  emit('cancel');
  resetForm();
};

/**
 * 重置表单
 */
const resetForm = () => {
  rating.value = 0;
  comment.value = '';
};
</script>

<style lang="scss">
.nut-textarea {
  background-color: #f0f0f0;

  &:focus {
    border-color: #4285f4;
    box-shadow: 0 0 0 2rpx rgba(66, 133, 244, 0.2);
  }
}

// 按钮样式优化
.nut-button {
  &:active {
    opacity: 0.8;
  }
}

// 星级评分点击反馈
@keyframes scaleIn {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.animate-scale {
  animation: scaleIn 0.3s ease;
}
</style>
